<template>
	<view class="">
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<!-- 顶部导航 开始 -->
		<selectHead left-button="转入" right-button="转出" class="selectBox" active-button="转出" @changeBtn="handleSelect">
			<view slot="left" @click="toHome()">
				<view class="" style="color: #FFFFFF;">主页</view>
			</view>
			<view slot="right">
				<view class="flex align-center" style="position: relative;">
					<view class="Tips end_top margin-left-xs" @click="tonavigateTo('/pages/public/search/search')" style="margin-right: 5rpx;position: absolute;left: -72rpx;">
						<image src="/static/images/search.png" mode="widthFix" style="width: 50rpx;"></image>
					</view>
					<view class="Tips end_top margin-left-xs" @click="tonavigateTo('/pages/public/msg/msg')">
						<image src="/static/images/msg.png" mode="widthFix" style="width: 50rpx;"></image>
					</view>
				</view>
			</view>
		</selectHead>
		<!-- 顶部导航 结束 -->
		
		<view class="bg_FFFFFF padding-lr">
			<view class="flex align-center padding-tb-sm">
				<view class="text-black text-lg label-title">可转金额：</view>
				<view class="color_EE4343 text-lg flex-sub">{{userData.money}}元</view>
			</view>
			<view class="flex align-center padding-tb-sm">
				<view class="text-black text-lg label-title">手&nbsp;续&nbsp;费：</view>
				<view class="color_EE4343 text-lg flex-sub">{{cashFee}}%</view>
			</view>
			<view class="flex align-center padding-tb-sm">
				<view class="text-black text-lg label-title">开&nbsp;户&nbsp;行：</view>
				<view class="color_A8AFC2 text-lg flex-sub">{{userData.openbank}}</view>
			</view>
			<view class="flex align-center padding-tb-sm">
				<view class="text-black text-lg label-title">持&nbsp;卡&nbsp;人：</view>
				<view class="color_A8AFC2 text-lg flex-sub">{{userData.realname}}</view>
			</view>
			<view class="flex align-center padding-tb-sm">
				<view class="text-black text-lg label-title">银行卡号：</view>
				<view class="color_A8AFC2 text-lg flex-sub">{{userData.bankno}}</view>
			</view>
			<view class="flex align-center padding-tb-sm">
				<view class="text-black text-lg label-title">已验手机：</view>
				<view class="color_A8AFC2 text-lg flex-sub">{{userData.phone}}</view>
			</view>
			
		</view>
		
		<view class="bg_FFFFFF margin-top-sm">
			<view class="cu-form-group">
				<view class="title text-black">转出金额</view>
				<input placeholder="请输入转出金额" name="input" style="color: #366092;" v-model="form.money"></input>
				<view>
					<image src="/static/images/icon/money_white.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title text-black">验证码</view>
				<input placeholder="请输入验证码" name="input" style="color: #366092;" v-model="form.code"></input>
				<view>
					<u-button size="mini" @click="getCode_v2()" class="button-border">{{codeTips}}</u-button>
				</view>
			</view>
		</view>
		<view class="padding-lr-xl padding-top-xl flex flex-direction">
			<button class="cu-btn lg" @click="submit" style="background-color: #EE515A;color: #FFFFFF;">确认转出</button>
		</view>
		<!-- 新版本end -->
	
		<view>
			<u-toast ref="uToast" />
		</view>
		
	</view>
</template>

<script>
	import selectHead from "@/component/selectHead/selectHead.vue"
	export default {
		components: {
			selectHead
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				actionFlag:0,
				form: {
					money: '',
					code: ''
				},
				codeTips: '发送验证码',
				labelPosition: 'left',
				border: false,
				userData:'',
				cashFee:''
			};
		},
		methods: {
			// 到首页
			toHome: function() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//切换头部选项卡
			handleSelect(type){
				if(type == 'left'){
					uni.redirectTo({
					    url: "/pages/member/recharge"
					});
				}
			},
            // 跳转页面
            tonavigateTo(url) {
            	uni.navigateTo({
            		url: url
            	})
            },
			//返回
			handleBack(){
				uni.navigateBack({
					delta:1
				})
			},
			
			userInfo: function() {
				this.$Request.get(this.$api.index.getUser).then(res => {
					this.userData = res.data;
					this.cashFee = res.cashfee;
				})
			},
			submit() {
				if(!this.form.code || !this.form.money){
					this.$refs.uToast.show({
						title: "请输入转出金额或验证码",
					})
					return;
				}
				if(this.actionFlag == 1){
					uni.showLoading({
						title: '请勿重复提交...',
						mask: true
					})
					uni.hideLoading();
					return
				}
				this.actionFlag = 1
				this.actionTitle = "等待审核"
				
				var that = this;
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				
				this.$Request.post(this.$api.index.cash, {
					code: this.form.code,
					money: this.form.money,
				}).then(res => {
					setTimeout(()=>{
						uni.hideLoading();
						that.$refs.uToast.show({
							title: res.msg,
						})
						if(res.code == 0){
							that.userInfo();
							uni.redirectTo({
							    url: "/pages/index/myMoney?current=3"
							});
						}
					},2000);
				})
			},
			getCode_v2() {
				let that = this;
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				setTimeout(() => {
					that.$Request.post(this.$api.index.sendMsg, {
						tel: that.userData.phone,
					}).then(res => {
						this.form.code = '168168'
						uni.showToast({
							title: "获取成功",
							mask: false,
							duration: 1000,
							icon: "none"
						});
					})
				
				}, 2000);
				let num = 60;
				this.codeTips = "60秒重新获取";
				let timer = setInterval(() => {
					num--;
					this.codeTips = num + "秒重新获取";
					if (num == 0) {
						clearInterval(timer);
						this.codeTips = "发送验证码";
					}
				}, 1000);
			},
			// 获取验证码
			getCode() {
				let that = this;
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				setTimeout(() => {
					that.$Request.post(this.$api.index.sendMsg, {
						tel: that.userData.phone,
					}).then(res => {
						uni.showToast({
							title: res.msg,
							mask: false,
							duration: 1000,
							icon: "none"
						});
					})
				
				}, 2000);
				let num = 60;
				this.codeTips = "60秒重新获取";
				let timer = setInterval(() => {
					num--;
					this.codeTips = num + "秒重新获取";
					if (num == 0) {
						clearInterval(timer);
						this.codeTips = "发送验证码";
					}
				}, 1000);
			
			},
		},
		onLoad: function() {
			this.userInfo();
		}
	}
</script>

<style lang="scss" scoped>
	@import "./cash.scss";
	.selectBox{
		background-color: #EE515A;
	}
	.ceiling{
		background-color: #FFFFFF;
	}
	.button-border{
		color: #E54D42 !important;
	}
	.button-border::after{
		border: 0;
	}
	.label-title{
		width: 200rpx;
	}
	.cu-form-group{
		background-color: #FFFFFF;
	}
	.cu-form-group + .cu-form-group {
	    border-top: 1px solid #EDEDED;
	}
</style>
